import { useState, useEffect } from 'react'
export function UseEffortDemo() {
    
    const [count, setCount] = useState(0)
    const [name, setName] =  useState('')

    // 组件初次渲染时，回调函数执行
    // count 和 name 发生变化时，回调函数执行
    useEffect(() => {
        console.log('useEffort invoked');
    },[count, name])

    function handleTyping(event){
        setName(event.target.value)
    }
    
    return (
        <div>
            {count}<button onClick={() => {setCount( count +1 )}}>click this to add</button>
            <div>
                <input type="text" placeholder='Please enter your name and press enter to confirm!' onKeyUp={handleTyping}/>
                {name ? <h3>Welcome home, {name}</h3> : ''}
            </div>
        </div>
    )
}